<!--每个页面都要放的客服-->
<template>
	<movable-area class="fixed-box" v-if="is_service_show">
		<movable-view class="fixed-button" direction="vertical" :inertia="true">
			<view class="customer-service">
				<button class="sign-btn-contact" send-message-title="客服会话" show-message-card send-message-path="/pages/index/index" open-type='contact'>确 认</button>
				<view>
					<image class="customer-service-img" mode="widthFix"
						:src="icon"></image>
				</view>
				<view>在线客服</view>
			</view>
		</movable-view>
	</movable-area>
</template>
<script>

export default {
	name: 'CommonDrag',
	data(){
		return {
			icon:this.$imgUrl+'index/customer-service.png',
		}
	},
	methods:{

	}
};
</script>

<style lang="scss" scoped>
	.fixed-box {
		pointer-events: none; 
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 700;
	}
	
	.fixed-button {
		pointer-events: auto;
		width: max-content;
		height: auto;
		
		z-index: 900;
		display: flex;
		align-items: center;
		justify-content: center;
		//控制按钮在页面的位置
		left: 0rpx;
		top:800rpx;
		
	}
	.customer-service {
		
		width: 112rpx;
		height: 112rpx;
		background-color: #4CBBAF;
		border-radius:0 56rpx 56rpx 0;
		font-size: 20rpx;
		padding-right: 10rpx;
		color: #FFFFFF;
		text-align: center;
		position: relative;
		overflow: hidden;
	}
	.sign-btn-contact{
		position: absolute;
		width: 112rpx;
		height: 112rpx;
		opacity: 0;
		border-radius: 0 56rpx 56rpx 0;
	
	}
	.customer-service-img {
		margin-top: 20rpx;
		width: 38rpx;
		height: 38rpx;
		
	}

</style>
